<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.css" />
	</head>

	<body>
		<div class="container">
		<!-- Stack the columns on mobile by making one full-width and the other half-width -->
		<div class="row">
			<div class="col-xs-12 col-md-8 bg-primary">.col-xs-12 .col-md-8</div>
			<div class="col-xs-6 col-md-4 bg-success">.col-xs-6 .col-md-4</div>
		</div>

		<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
		<div class="row">
			<div class="col-xs-6 col-md-4 bg-danger">.col-xs-6 .col-md-4</div>
			<div class="col-xs-6 col-md-4 bg-info">.col-xs-6 .col-md-4</div>
			<div class="col-xs-6 col-md-4 bg-primary">.col-xs-6 .col-md-4</div>
		</div>

		<!-- Columns are always 50% wide, on mobile and desktop -->
		<div class="row">
			<div class="col-xs-6 bg-warning">.col-xs-6</div>
			<div class="col-xs-6 bg-success">.col-xs-6</div>
		</div>
		
		</div>
	</body>

</html>